<template>
  <a-layout class="container">
    <a-layout-content class="layout-content">
      <layout-breadcrumb/>
      <div style="display: flex">
        <a-page-header title="关键数据" sub-title="更新时间 2022-02-02 02:00:00" class="page-header">
            <a-row>
              <a-col :span="8">
                <a-statistic title="用户数" :value="99"/>
              </a-col>
              <a-col :span="8">
                <a-statistic title="文章数" :value="20"/>
              </a-col>
              <a-col :span="8">
                <a-statistic title="评论数" :value="20"/>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-statistic title="友情链接" :value="20"/>
              </a-col>
              <a-col :span="8">
                <a-statistic title="今日访问" :value="20"/>
              </a-col>
              <a-col :span="8">
                <a-statistic title="累积访问" :value="999"/>
              </a-col>
            </a-row>
        </a-page-header>
        <div class="page-ad" >
          <a-empty :image="simpleImage"/>
        </div>
      </div>
      <div id="chart"
           style="height: 400px;width: 100%;margin-top: 20px;padding: 20px;border: 1px solid rgb(235, 237, 240);"></div>
    </a-layout-content>
  </a-layout>
</template>

<script>
import {defineComponent, onMounted} from 'vue';
import * as echarts from 'echarts'
import {Empty} from 'ant-design-vue';
import LayoutBreadcrumb from "@/components/layout/LayoutBreadcrumb";

const data = [{
  key: '1',
  name: 'John Brown',
  money: '￥300,000.00',
  address: 'New York No. 1 Lake Park',
}, {
  key: '2',
  name: 'Jim Green',
  money: '￥1,256,000.00',
  address: 'London No. 1 Lake Park',
}, {
  key: '3',
  name: 'Joe Black',
  money: '￥120,000.00',
  address: 'Sidney No. 1 Lake Park',
}];

export default defineComponent({
  components: {LayoutBreadcrumb},
  setup() {
    onMounted(() => {
      let myChart = echarts.init(document.getElementById("chart"));

      // 绘制图表
      myChart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });
    });

    return {
      data,
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
    };
  },

});
</script>

<style>
.container {

}

.layout-content {
  background-color: #fff;
  margin: 24px;
  padding: 0 24px 24px;
  min-height: 280px;
}

.page-header{
  border: 1px solid rgb(235, 237, 240);flex: 1
}
.page-ad {
  border: 1px solid rgb(235, 237, 240);flex: 1;margin-left: 20px;
}

</style>